<template>
	<view class="notice-list">

		<!-- 公告 -->
		<view class="notice" v-for="noti in noticeList" :key="noti.id">
			<view class="desc">
				{{noti.content}}
			</view>
			<view class="watch" @click="moreNotice(noti.content)">
				查看公告
			</view>
		</view>
		<u-modal v-model="show" :content="content" :show-title="false" confirm-text="关闭" :content-style="{'font-szie': '28rpx','color': '#000','font-weight': '600'
		}" :confirm-style="{'color': '#888'}"></u-modal>
		<u-loadmore :status="status" icon-type="flower" :load-text="loadText" @loadmore="addMoreData" />
	</view>
</template>

<script>
	import request from '@/util/request.js'
	export default {
		data() {
			return {
				page: 1,
				noticeList: [],
				show: false,
				content: '',
				status: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '正在加载中',
					nomore: '没有更多了'
				}
			}
		},
		methods: {
			// 请求公告列表
			requestNoticeList() {
				request.globalRequest({
					url: "/api/notice/list",
					data: {
						page: this.page,
						size: 20
					}
				}).then(res => {
					if (res.status == 'login') {
						uni.redirectTo({
							url: '/pages/login/login'
						})
					}
					if (res.list && res.list.length > 0) {
						res.list.forEach(notice => {
							this.noticeList.push({
								id: notice.noticeId,
								content: notice.noticeInfo
							})
						})
						if (res.list.length == 20) {
							this.status = "loadmore"
							this.page++
						} else {
							this.status = "nomore"
						}

					}

				})
			},
			moreNotice(content) {
				this.content = content
				this.show = true
			},
			// 手动加载更多
			addMoreData() {
				this.status = 'loading'
				this.requestNoticeList()
			},

		},
		created() {
			this.requestNoticeList()
		}
	}
</script>

<style lang="scss" scoped>
	.notice-list {
		padding: 0 10rpx;

		.notice {
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.desc {
				font-size: 24rpx;
				line-height: 48rpx;
				max-height: 100rpx;
				font-weight: 500;
				color: #000;
				overflow: hidden;
				text-overflow: ellipsis;
				/*显示为......*/
				-webkit-line-clamp: 2;
				/*显示为两行，在第二行中显示为.......*/
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.watch {
				color: #888;
				font-size: 24rpx;
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}
</style>
